<div>
    <h3 class="margin-bottom margin-bottom-xs">Destination</h3>
    <div class="panel" data-bind="with: localSettings">
        <div class="padding">
            <div class="flex-horizontal">
                <div class="toggle">
                    <input id="toggle-local" type="checkbox" data-bind="checked: enabled, enable: $root.isBackupOptionAvailable('Local')">
                    <label for="toggle-local">Local</label>
                </div>
                <div class="text-warning js-option-disabled" data-bind="visible: !$root.isBackupOptionAvailable('Local')">
                    <small><i class="icon-info"></i></small>
                </div>
            </div>
            <div class="row" data-bind="collapse: enabled">
                <div class="col-sm-8 col-lg-6">
                    <div class="row margin-bottom">
                        <div class="col-xs-offset-12 col-sm-offset-6 col-lg-offset-4">
                            <div class="toggle margin-left">
                                <input id="localSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                                <label for="localSettingsViaScript">Override configuration via external script</label>
                            </div>
                        </div>
                    </div>
                    <div class="row" data-bind="collapse: hasConfigurationScript">
                        <div data-bind="template: { name: 'backup-via-configuration-script' }"></div>
                    </div>
                    <div data-bind="if: !hasConfigurationScript()">
                        <div class="row margin-bottom" data-bind="validationElement: folderPath">
                            <label class="control-label col-xs-12 col-sm-6 col-lg-4">Backup directory <i class="required"></i></label>
                            <div class="col-xs-12 col-sm-6 col-lg-8" data-bind="validationElement: folderPath, validationOptions: { insertMessages: false }">
                                <div data-bind="text: $root.serverConfiguration().LocalRootPath"></div>
                                <div class="dropdown btn-block">
                                    <input type="text" class="form-control dropdown-toggle" data-toggle="dropdown"
                                           id="localFolderPath"
                                           data-bind="textInput: folderPath, attr: { 'placeholder': $root.serverConfiguration().LocalRootPath ? 'Relative backup path' : 'Full directory backup path' }, hasFocus: folderPathHasFocus">
                                    <span class="caret dropdown-toggle" data-toggle="dropdown"></span>
                                    <ul class="dropdown-menu" data-bind="foreach: $parent.folderPathOptions, autoComplete: '#localFolderPath'">
                                        <li data-bind="click: $parent.localPathChanged">
                                            <a href="#" data-bind="text: $data"></a>
                                        </li>
                                    </ul>
                                </div>
                                <span class="help-block" data-bind="validationMessage: folderPath"></span>
                            </div>
                        </div>
                        <div class="row margin-bottom">
                            <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                            <div class="col-xs-12 col-sm-6 col-lg-8" data-bind="visible: $parent.locationInfo().length">
                                <div class="text-info bg-info padding padding-sm">
                                    <span>The backup files will be created in:</span><br />
                                    <div data-bind="if: $parent.spinners.locationInfoLoading">
                                        <span class="global-spinner"></span>
                                    </div>
                                    <div data-bind="if: !$parent.spinners.locationInfoLoading()">
                                        <ul data-bind="foreach: $parent.locationInfo" class="text-info bg-info">
                                            <li>
                                                <small>
                                                    Node Tag: <strong data-bind="text: NodeTag"></strong>
                                                    <br />
                                                    Path: <strong data-bind="text: $parents[1].getPathForCreatedBackups($data)"></strong><br />
                                                    <!-- ko if: Error -->
                                                    Error: <strong data-bind="text: Error"></strong>
                                                    <!-- /ko -->
                                                    <!-- ko ifnot: Error -->
                                                    Free Disk Space:
                                                    <span data-bind="if: FreeSpaceHumane">
                                                        <strong data-bind="text: FreeSpaceHumane"></strong>
                                                    </span>
                                                    <span data-bind="if: TotalSpaceHumane">
                                                        (Total: <strong data-bind="text: TotalSpaceHumane"></strong>)
                                                    </span>
                                                    <span data-bind="if: !FreeSpaceHumane">
                                                        <strong>(Path is unreachable)</strong>
                                                    </span>
                                                    <!-- /ko -->
                                                </small>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel" data-bind="with: s3Settings, css: { 'item-disabled pe-none': !$root.hasCloudBackups && backupOperation === 'manual' }">
        <div class="padding">
            <div class="flex-horizontal">
                <div class="toggle">
                    <input id="toggle-amazons3" type="checkbox" data-bind="checked: enabled, enable: $root.isBackupOptionAvailable('AmazonS3')">
                    <label for="toggle-amazons3">Amazon S3</label>
                </div>
                <div class="text-warning js-option-disabled" data-bind="visible: !$root.isBackupOptionAvailable('AmazonS3')">
                    <small><i class="icon-info"></i></small>
                </div>
                <span class="badge license-restricted-badge professional" data-bind="if: !$root.hasCloudBackups && $parent.backupOperation === 'manual'">Professional +</span>
            </div>
            <div class="row" data-bind="collapse: enabled">
                <div class="col-sm-8 col-lg-6">
                    <div class="row">
                        <div class="col-xs-offset-12 col-sm-offset-6 col-lg-offset-4">
                            <div class="toggle margin-left">
                                <input id="s3SettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                                <label for="s3SettingsViaScript">Override configuration via external script</label>
                            </div>
                        </div>
                    </div>
                    <div class="row margin-bottom" data-bind="visible: !hasConfigurationScript()">
                        <div class="col-xs-offset-12 col-sm-offset-6 col-lg-offset-4">
                            <div class="toggle margin-left">
                                <input id="s3CustomHost" type="checkbox" data-bind="checked: useCustomS3Host">
                                <label for="s3CustomHost">Use a custom S3 host</label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div data-bind="collapse: hasConfigurationScript">
                            <div data-bind="template: { name: 'backup-via-configuration-script' }"></div>
                        </div>
                    </div>
                    <div data-bind="collapse: !hasConfigurationScript()">
                        <div data-bind="compose: $data"></div>
                        <div data-bind="if: $parent.isServerWide()">
                            <div data-bind="template: { name: 'remote-folder-path' }"></div>
                        </div>
                        <div class="text-right">
                            <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                                <i class="icon-rocket"></i>
                                &nbsp;&nbsp;<span>Test credentials</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-addon" data-bind="template: { name: 'test-connection-results-template' }">
        </div>
    </div>
    <div class="panel" data-bind="with: azureSettings, css: { 'item-disabled pe-none': !$root.hasCloudBackups && backupOperation === 'manual' }">
        <div class="padding">
            <div class="flex-horizontal">
                <div class="toggle">
                    <input id="toggle-azure" type="checkbox" data-bind="checked: enabled, enable: $root.isBackupOptionAvailable('Azure')">
                    <label for="toggle-azure">Azure</label>
                </div>
                <div class="text-warning js-option-disabled" data-bind="visible: !$root.isBackupOptionAvailable('Azure')">
                    <small><i class="icon-info"></i></small>
                </div>
                <span class="badge license-restricted-badge professional" data-bind="if: !$root.hasCloudBackups && $parent.backupOperation === 'manual'">Professional +</span>
            </div>
            <div class="row" data-bind="collapse: enabled">
                <div class="col-sm-8 col-lg-6">
                    <div class="row margin-bottom">
                        <div class="col-xs-offset-12 col-sm-offset-6 col-lg-offset-4">
                            <div class="toggle margin-left">
                                <input id="azureSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                                <label for="azureSettingsViaScript">Override configuration via external script</label>
                            </div>
                        </div>
                    </div>
                    <div class="row" data-bind="collapse: hasConfigurationScript">
                        <div data-bind="template: { name: 'backup-via-configuration-script' }"></div>
                    </div>
                    <div data-bind="collapse: !hasConfigurationScript()">
                        <div data-bind="compose: $data"></div>
                        <div data-bind="if: $parent.isServerWide()">
                            <div data-bind="template: { name: 'remote-folder-path' }"></div>
                        </div>
                        <div class="text-right">
                            <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                                <i class="icon-rocket"></i>
                                &nbsp;&nbsp;<span>Test credentials</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-addon" data-bind="template: { name: 'test-connection-results-template' }">
        </div>
    </div>
    <div class="panel" data-bind="with: googleCloudSettings, css: { 'item-disabled pe-none': !$root.hasCloudBackups && backupOperation === 'manual' }">
        <div class="padding">
            <div class="flex-horizontal">
                <div class="toggle">
                    <input id="toggle-GoogleCloud" type="checkbox" data-bind="checked: enabled, enable: $root.isBackupOptionAvailable('GoogleCloud')">
                    <label for="toggle-GoogleCloud">Google Cloud</label>
                </div>
                <div class="text-warning js-option-disabled" data-bind="visible: !$root.isBackupOptionAvailable('GoogleCloud')">
                    <small><i class="icon-info"></i></small>
                </div>
                <span class="badge license-restricted-badge professional" data-bind="if: !$root.hasCloudBackups && $parent.backupOperation === 'manual'">Professional +</span>
            </div>
            <div class="row" data-bind="collapse: enabled">
                <div class="col-sm-8 col-lg-6">
                    <div class="row margin-bottom">
                        <div class="col-xs-offset-12 col-sm-offset-6 col-lg-offset-4">
                            <div class="toggle margin-left">
                                <input id="googleCloudSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                                <label for="googleCloudSettingsViaScript">Override configuration via external script</label>
                            </div>
                        </div>
                    </div>
                    <div class="row" data-bind="collapse: hasConfigurationScript">
                        <div data-bind="template: { name: 'backup-via-configuration-script' }"></div>
                    </div>
                    <div data-bind="collapse: !hasConfigurationScript()">
                        <div data-bind="compose: { model: $data }"></div>
                        <div data-bind="if: $parent.isServerWide()">
                            <div data-bind="template: { name: 'remote-folder-path' }"></div>
                        </div>
                        <div class="text-right">
                            <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                                <i class="icon-rocket"></i>
                                <span>Test credentials</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-addon" data-bind="template: { name: 'test-connection-results-template' }">
        </div>
    </div>
    <div class="panel" data-bind="with: glacierSettings, css: { 'item-disabled pe-none': !$root.hasCloudBackups && backupOperation === 'manual' }">
        <div class="padding">
            <div class="flex-horizontal">
                <div class="toggle">
                    <input id="toggle-amazonglacier" type="checkbox" data-bind="checked: enabled, enable: $root.isBackupOptionAvailable('AmazonGlacier')">
                    <label for="toggle-amazonglacier">Amazon Glacier</label>
                </div>
                <div class="text-warning js-option-disabled" data-bind="visible: !$root.isBackupOptionAvailable('AmazonGlacier')">
                    <small><i class="icon-info"></i></small>
                </div>
                <span class="badge license-restricted-badge professional" data-bind="if: !$root.hasCloudBackups && $parent.backupOperation === 'manual'">Professional +</span>
            </div>
            <div class="row" data-bind="collapse: enabled">
                <div class="col-sm-8 col-lg-6">
                    <div class="row margin-bottom">
                        <div class="col-xs-offset-12 col-sm-offset-6 col-lg-offset-4">
                            <div class="toggle margin-left">
                                <input id="glacierSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                                <label for="glacierSettingsViaScript">Override configuration via external script</label>
                            </div>
                        </div>
                    </div>
                    <div class="row" data-bind="collapse: hasConfigurationScript">
                        <div data-bind="template: { name: 'backup-via-configuration-script' }"></div>
                    </div>
                    <div data-bind="collapse: !hasConfigurationScript()">
                        <div data-bind="compose: { model: $data }"></div>
                        <div data-bind="if: $parent.isServerWide()">
                            <div data-bind="template: { name: 'remote-folder-path' }"></div>
                        </div>
                        <div class="text-right">
                            <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                                <i class="icon-rocket"></i>
                                &nbsp;&nbsp;<span>Test credentials</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-addon" data-bind="template: { name: 'test-connection-results-template' }">
        </div>
    </div>
    <div class="panel" data-bind="with: ftpSettings, css: { 'item-disabled pe-none': !$root.hasCloudBackups && backupOperation === 'manual' }">
        <div class="padding">
            <div class="flex-horizontal">
                <div class="toggle">
                    <input id="toggle-ftp" type="checkbox" data-bind="checked: enabled, enable: $root.isBackupOptionAvailable('FTP')">
                    <label for="toggle-ftp">FTP</label>
                </div>
                <div class="text-warning js-option-disabled" data-bind="visible: !$root.isBackupOptionAvailable('FTP')">
                    <small><i class="icon-info"></i></small>
                </div>
                <span class="badge license-restricted-badge professional" data-bind="if: !$root.hasCloudBackups && $parent.backupOperation === 'manual'">Professional +</span>
            </div>
            <div class="row" data-bind="collapse: enabled">
                <div class="col-sm-8 col-lg-6">
                    <div class="row margin-bottom">
                        <div class="col-xs-offset-12 col-sm-offset-6 col-lg-offset-4">
                            <div class="toggle margin-left">
                                <input id="ftpSettingsViaScript" type="checkbox" data-bind="checked: hasConfigurationScript">
                                <label for="ftpSettingsViaScript">Override configuration via external script</label>
                            </div>
                        </div>
                    </div>
                    <div class="row" data-bind="collapse: hasConfigurationScript">
                        <div data-bind="template: { name: 'backup-via-configuration-script' }"></div>
                    </div>
                    <div data-bind="collapse: !hasConfigurationScript()">
                        <div data-bind="compose: { model: $data }"></div>
                        <div class="row margin-bottom" data-bind="if: $parent.isServerWide()">
                            <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
                            <div class="col-xs-12 col-sm-6 col-lg-8">
                                <div class="text-info bg-info padding padding-sm">
                                    <small>The backup files will be created in path:</small>
                                    <div class="text-info bg-info">
                                        <small><strong data-bind="text: url() + '/{DATABASE-NAME}/'"></strong></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <button data-bind="click: _.partial($root.testCredentials, $data), disable: isTestingCredentials, css: { 'btn-spinner': isTestingCredentials }" class="btn btn-info">
                                <i class="icon-rocket"></i>
                                &nbsp;&nbsp;<span>Test credentials</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-addon" data-bind="template: { name: 'test-connection-results-template' }">
        </div>
    </div>
</div>

<script type="text/html" id="backup-via-configuration-script">
    <div data-bind="compose: $root.backupConfigurationView"></div>
</script>

<script type="text/html" id="remote-folder-path">
    <div class="row margin-bottom">
        <label class="control-label col-xs-12 col-sm-6 col-lg-4"></label>
        <div class="col-xs-12 col-sm-6 col-lg-8">
            <div class="text-info bg-info padding padding-sm">
                <small>The backup files will be created in path:</small>
                <div class="text-info bg-info">
                    <small><strong data-bind="text: remoteFolderName() + '/{DATABASE-NAME}/'"></strong></small>
                </div>
            </div>
        </div>
    </div>
</script>
